<template>
    <div class="management-outliers">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false" style="width:80%">
                <a-row>
                    <a-col :span="6">
                        <a-form-model-item label="部门类型" :label-col="{span:6}" :wrapper-col="{span:18}" style="width:100%">
                            <a-select v-model="page.deptTypeId">
                                <a-select-option v-for="item in treeData" :value="item.id" :key="item.id">{{item.deptName}}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-model-item label="部门名称" :label-col="{span:6}" :wrapper-col="{span:18}" style="width:90%">
                            <a-input v-model="page.nickname" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="11">
                        <a-form-model-item>
                            <a-button type="primary" @click="selectFn" style="color:rgba(0,0,0,0.8)">搜索</a-button>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <a-button type="primary" @click="()=>{title = '新增用户';addPop =true;}">添加</a-button>
        </div>
        <div class="exception-content">
            <a-table :data-source="tableData" :pagination="false" rowKey="id">
                <a-table-column title="部门id" data-index="id" align="center" :ellipsis="true" />
                <a-table-column title="部门名称" data-index="deptName" align="center" :ellipsis="true" />
                <a-table-column title="负责人" data-index="contactName" align="center" :ellipsis="true" />
                <a-table-column title="联系方式" data-index="contactPhone" align="center" :ellipsis="true" />
                <a-table-column title="操作" align="center" width="200px">
                    <template slot-scope="text,record">
                        <div class="handle">
                            <a-button type="warning" @click="editFn(record)">修改</a-button>
                            <a-button type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </a-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" hideOnSinglePage :item-render="itemRender" @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="50%" :title="title" centered @cancel="()=>form = {}" :maskClosable="false">
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="部门名称">
                    <a-input v-model="form.deptName" />
                </a-form-model-item>
                <a-form-model-item label="负责人电话">
                    <a-input v-model="form.contactPhone" />
                </a-form-model-item>
                <a-form-model-item label="负责人">
                    <a-input v-model="form.contactName" />
                </a-form-model-item>
                <a-form-model-item label="部门类型">
                    <a-input v-model="form.deptTypeId" type="input" />
                </a-form-model-item>
                <a-form-model-item label="是否启用">
                    <a-switch v-model="form.isEnable" />
                </a-form-model-item>
                <a-form-model-item label="公司ID">
                    <a-input v-model="form.companyId" type="input" />
                </a-form-model-item>
            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="SubmitFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: "outliers",
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            replaceFields: {
                // 树形字段改变
                title: "name",
                value: "id",
                children: "waringTypePoList",
            },
            nickname: "",
            treeData: [],
            treeData1: [],
            title: "",
            addPop: false,
            page: {
                current: 1,
                size: 5,
                deptName: "",
                deptTypeId: "",
            },
            total: 0,
            tableData: [],
            form: {
                // 弹窗添加表单数据
                deptName: "",
                contactPhone: "",
                contactName: "",
                deptTypeId: "",
                isEnable: true,
                companyId: "",
            },
        };
    },
    methods: {
        selectFn() {
            // 搜索按钮
            console.log(this.page);
            this.page.current = 1;
            this.getData();
        },
        editFn(data) {
            console.log(data);

            this.title = "修改部门信息";
            this.form = data;
            this.addPop = true;
        },
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除",
                onOk() {
                    _that.$api.delDepartment(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("数据删除成功!");
                            _that.getData();
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        SubmitFn() {
            // 弹窗提交按钮
            if (this.title == "新增用户") {
                console.log(this.form);
                this.form.sex = parseInt(this.form.sex);
                this.$api.addDepartment(this.form).then((res) => {
                    if (res.data.data == true) {
                        this.$message.info("添加成功!");
                        this.addPop = false;
                        this.form = {};
                        this.getData();
                    }
                });
            } else {
                this.$api.editUser(this.form).then((res) => {
                    if (res.data.data == true) {
                        this.addPop = false;
                        this.$message.info("修改成功!");
                        this.getData();
                    }
                });
            }
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a>上一页</a>;
            } else if (type === "next") {
                return <a>下一页</a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getData();
        },
        // 数据获取方法
        getTreeData() {
            // 获取树形结构
            this.$api.getDeptList({ current: 1, size: 10000 }).then((res) => {
                if (res.data.code == 0) {
                    this.treeData = res.data.data;
                    this.treeData1 = res.data.data;
                }
            });
        },
        getData() {
            this.$api.getDepartmentList(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
    },
    mounted() {
        this.getData();
        this.getTreeData();
    },
};
</script>

<style lang="scss" scoped>
.management-outliers {
    width: 98%;
    height: 98%;
    padding: 1%;
    box-sizing: border-box;
    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle {
            display: flex;
            justify-content: space-around;
        }
    }
    .exception-bottom {
        width: 100%;
        .page-box {
            float: right;
        }
    }
}
</style>